import React, { Component } from 'react';
import { connect } from 'dva';
import { Row,Col,Modal,Table,Button } from 'antd';
import styles from './Analysis.less';
import ExportJsonExcel from 'js-export-excel';//导出
/* eslint react/no-danger:0 */
@connect(({ statisticchart, loading }) => ({
  statisticchart,
  loading: loading.effects['statisticchart/fetch'],
}))
class FormationList extends Component {
  state = {
    modalByFormation: false,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'statisticchart/get_proformation_list',
    });
  }

  columnsByFormationTotal = [
      {
        title: '序号',
        dataIndex: 'ordernum',
        key: 'ordernum',
      },
      {
        title: '编制类型',
        dataIndex: 'formation_type',
        key: 'formation_type',
      }, {
        title: '总编制数',
        dataIndex: 'total',
        key: 'total',
      }
  ];

  columnsByFormation = [
		{
        title: '单位名称',
        dataIndex: 'unit_superior_unit',
        key: 'unit_superior_unit',
    },  {
        title: '编制类型',
        dataIndex: 'formation_type',
        key: 'formation_type',
    },  {
        title: '单位级别',
        dataIndex: 'unit_level',
        key: 'unit_level',
    },  {
        title: '单位所在政区',
        dataIndex: 'administrative_area',
        key: 'administrative_area',
    }, {
        title: '批准单位',
        dataIndex: 'approve_unit',
        key: 'approve_unit',
    }, {
        title: '批准时间',
        dataIndex: 'approve_time',
        key: 'approve_time',
    }
	];

  //导出excel
  downloadExl = () => {
    const {
      statisticchart: {
        formationDetialData
      },
    } = this.props;
    	var option={};
  	  option.fileName = '编制统计信息'
  	  option.datas=[
  	    {
  	      sheetData:formationDetialData.list || [],
  	      sheetName:'编制统计信息',
  	      sheetHeader:['单位名称','编制类型','单位级别','单位所在政区','批准单位','批准时间'],
  	      columnWidths: [10,10,10,10,10,10],
  	      columnHeights: [10,10,10,10,10,10]
  	    }
  	  ];

  	  var toExcel = new ExportJsonExcel(option);
  	  toExcel.saveExcel();
  }

  //编制信息弹窗
	handleModalByFormation = flag => {
		this.setState({
			modalByFormation: !!flag,
		});
	};

  render() {
    const {
      statisticchart: {
      	formationListData,
        formationDetialData
      },
      modalFormationVisible,
      handleFormationModalVisible
    } = this.props;
    const { modalByFormation } = this.state;
    return (
    <div>
     	<Modal
			width={800}
			centered
			destroyOnClose
			title="编制详情"
			visible={modalByFormation}
			onOk={()=> this.handleModalByFormation()}
			onCancel={()=> this.handleModalByFormation()}
			>
      <Button type="primary" icon="download" onClick={this.downloadExl} style={{float: 'right',zIndex: 1000,marginBottom: '10px',marginTop: '-14px'}}>
      导出
      </Button>
			<Table columns={this.columnsByFormation} dataSource={formationDetialData?formationDetialData.list: []}/>
		</Modal>
    <Modal
    	width={800}
    	centered
    	destroyOnClose
    	title="编制统计表"
    	visible={modalFormationVisible}
    	onOk={()=> handleFormationModalVisible()}
    	onCancel={()=> handleFormationModalVisible()}
    	>
    	<Table
        columns={this.columnsByFormationTotal}
        dataSource={formationListData?formationListData.list: []}
        rowClassName={(record, index) => {
          return styles.statisticListStyle;
        }}
        onRow={record => {
          return {
            onClick: event => {
              handleFormationModalVisible();
              const { dispatch } = this.props;
              dispatch({
                type: 'statisticchart/get_proformation_detail',
              });
              this.handleModalByFormation(true)
            }, // 点击行
          };
        }}
      />
    </Modal>
    </div>
    );
  }
}

export default FormationList;
